<template>
	<view>
		<view>
			<u-swiper :list="banner" @click="goPage"></u-swiper>
		</view>
		<view>
			<u-tabs :list="tabs" @click="switchTab"></u-tabs>
		</view>
		<view>
			<u-list @scrolltolower="scrolltolower" height="1200rpx">
				<u-list-item v-for="(item, index) in articleList" :key="index">
					<view class="itemBox">
						<view>
							<u--image :showLoading="true" :src="src" width="160rpx" height="160rpx" @click="click"
								radius="25rpx">
							</u--image>
						</view>
						<view class="rightBox">
							<view class="title">
								{{item.title}}
							</view>
							<view style="margin-top: 10rpx;">
								<u--text :lines="2" text="1232131231313asdasd是大飒飒萨达埃点爱撕打算阿松大爱撕打算爱撕埃点撒旦啊大撒旦撒旦阿松大爱撕大苏打">
								</u--text>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
				articleList: [{
					title: "测试文章1"
				}, {
					title: "测试文章2"
				}, {
					title: "测试文章3"
				}, {
					title: "测试文章4"
				}, {
					title: "测试文章5"
				}],
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				],
				tabs: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]
			}
		},
		methods: {

			goPage() {},
			switchTab() {},
			scrolltolower() {

			}
		}
	}
</script>

<style lang="scss">
	.itemBox {
		display: flex;
		height: 200rpx;
		padding: 20rpx;
		background-color: #ffff;
		border-radius: 40rpx;

		.rightBox {
			margin-left: 25rpx;
		}
	}
</style>
